import 'package:flutter/material.dart';
import 'sliver_page.dart'; // 导入 Sliver 布局页面
import 'box_page.dart'; // 导入盒布局页面

// Flutter 应用的入口函数
void main() {
  // runApp 函数用于启动 Flutter 应用，它接收一个 Widget 作为参数
  runApp(const MyApp());
}

// MyApp 是一个 StatelessWidget，它是应用的根 Widget
class MyApp extends StatelessWidget {
  // 构造函数，接收一个可选的 key 参数
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    // 返回一个 MaterialApp 组件，它是 Material Design 风格应用的根组件
    return MaterialApp(
      // title 是应用在任务切换器中显示的标题
      title: 'Flutter 布局模型对比演示',
      // theme 定义了应用的主题，这里设置了主色板为蓝色
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      // home 是应用的默认路由（初始页面），这里设置为 MyHomePage
      home: const MyHomePage(),
    );
  }
}

// MyHomePage 是一个 StatefulWidget，因为它包含可变状态（TabController）
class MyHomePage extends StatefulWidget {
  // 构造函数，接收一个可选的 key 参数
  const MyHomePage({super.key});

  @override
  // createState 方法返回与此 StatefulWidget关联的 State 对象
  State<MyHomePage> createState() => _MyHomePageState();
}

// _MyHomePageState 是 MyHomePage 的 State 类，管理 MyHomePage 的状态
// with SingleTickerProviderStateMixin 用于提供 Ticker，供 TabController 使用
class _MyHomePageState extends State<MyHomePage>
    with SingleTickerProviderStateMixin {
  // 声明一个 TabController，用于控制 TabBar 和 TabBarView
  late TabController _tabController;

  @override
  void initState() {
    super.initState();
    // 初始化 TabController，设置 Tab 的数量为 2，并指定 vsync 为 this
    _tabController = TabController(length: 2, vsync: this);
  }

  @override
  void dispose() {
    // 在 Widget 销毁时，释放 TabController 使用的资源
    _tabController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    // 返回一个 Scaffold 组件，构建页面的基本结构
    return Scaffold(
      // appBar 定义页面的应用栏
      appBar: AppBar(
        // title 设置应用栏的标题
        title: const Text('布局模型对比'),
        // bottom 在 AppBar 的底部添加一个 TabBar
        bottom: TabBar(
          // controller 指定 TabBar 使用的 TabController
          controller: _tabController,
          // tabs 定义 TabBar 中的各个 Tab
          tabs: const [
            Tab(text: 'Sliver 布局'), // 第一个 Tab，显示 Sliver 布局页面
            Tab(text: '盒布局'), // 第二个 Tab，显示盒布局页面
          ],
        ),
      ),
      // body 是页面的主要内容区域，这里使用 TabBarView 来显示与 TabBar 对应的页面内容
      body: TabBarView(
        // controller 指定 TabBarView 使用的 TabController，确保与 TabBar 同步
        controller: _tabController,
        // children 定义了每个 Tab 对应的页面内容
        children: const [
          SliverPage(), // 第一个 Tab 对应 SliverPage
          BoxPage(), // 第二个 Tab 对应 BoxPage
        ],
      ),
    );
  }
}
